<script setup>
  import { reactive, ref, watch } from "vue";
  const user = reactive({
    name: "tom",
    info: {
      gender: "男",
      age: 18,
    },
  });
  

  // watch(user.info, (newValues, oldValues) => {
  //   console.log("数据改变了");
  //   console.log(newValues, oldValues);
  // });

  watch(()=>user.info, (newValues, oldValues) => {
    console.log("数据改变了");
    console.log(newValues, oldValues);
  },{deep:true});

  // watch(()=>user.info.age, (newValues, oldValues) => {
  //   console.log("数据改变了");
  //   console.log(newValues, oldValues);
  // });
  
</script>

<template>
  <p>
    姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
  </p>
  <button @click="user.info.age++">+1</button>
</template>